<template>
  <div>
    <a-tabs
      type="card"
      defaultActiveKey="base"
      :activeKey="tabActiveKey"
      @change="tabChange"
    >
      <a-tab-pane key="base" tab="基本信息">
        <el-form style="margin-right: 20px;">
          <a-row class="ant-form-item form-item ">
            <a-row-item label="类型：" label-col="4" wrapper-col="8">
              <a-tag color="purple">{{ currentSelect.type }}</a-tag>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="步骤id：" label-col="4" wrapper-col="20">
              <el-input :value="currentSelect.id" disabled />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="步骤名称：" label-col="4" wrapper-col="20">
              <el-input
                placeholder="请输入步骤名称"
                v-model="currentSelect.nodeName"
              />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="宽度：" label-col="4" wrapper-col="8">
              <el-input
                placeholder="请输入宽度"
                v-model="currentSelect.width"
              />
            </a-row-item>
            <a-row-item label="高度：" label-col="4" wrapper-col="8">
              <el-input
                placeholder="请输入高度"
                v-model="currentSelect.height"
              />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="意见显示：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                default-checked
                v-model="currentSelect.opinionDisplay"
              />
            </a-row-item>
            <a-row-item label="超期提示：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="提示"
                unCheckedChildren="不提示"
                default-checked
                v-model="currentSelect.expiredPrompt"
              />
            </a-row-item>
          </a-row>

          <a-row class="ant-form-item form-item ">
            <a-row-item label="审签类型：" label-col="4" wrapper-col="8">
              <el-select
                v-model="currentSelect.signatureType"
                class="item_width"
              >
                <el-option
                  v-for="item in signatureTypes"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                ></el-option>
              </el-select>
            </a-row-item>
            <a-row-item label="工时(天)：" label-col="4" wrapper-col="8">
              <el-input
                placeholder="天数"
                v-model="currentSelect.workTime"
                style="width: 80px;float: left;"
              />
              <a-checkbox
                v-model="currentSelect.sendSetWorkTime"
                style="float: left;margin-left: 10px;"
              >
                发送时指定完成时间
              </a-checkbox>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="是否归档：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="归档"
                unCheckedChildren="不归档"
                default-checked
                v-model="currentSelect.archives"
              />
            </a-row-item>
            <a-row-item label="归档参数：" label-col="4" wrapper-col="8">
              <el-input
                placeholder="请输入归档参数"
                v-model="currentSelect.archivesParams"
              />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="限制时间：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                default-checked
                v-model="currentSelect.limitTime"
              />
            </a-row-item>
            <a-row-item label="其他时间：" label-col="4" wrapper-col="8">
              <el-input
                placeholder="请输入其他时间"
                v-model="currentSelect.otherTime"
              />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="发送提示语：" label-col="4" wrapper-col="8">
              <el-input
                placeholder="请输入发送提示语"
                v-model="currentSelect.sendShowMessage"
              />
            </a-row-item>
            <a-row-item label="退回提示语：" label-col="4" wrapper-col="8">
              <el-input
                placeholder="请输入退回提示语"
                v-model="currentSelect.backShowMessage"
              />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="超时自动提交：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                default-checked
                v-model="currentSelect.timeOutSubmit"
              />
            </a-row-item>
            <a-row-item label="开启督办：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                default-checked
                v-model="currentSelect.showSupervision"
              />
            </a-row-item>
          </a-row>

          <a-row class="ant-form-item form-item ">
            <a-row-item label="表单：" label-col="4" wrapper-col="20">
              <a-row-item label-col="0" wrapper-col="8">
                <el-select
                  v-model="currentSelect.form.formType"
                  class="item_width"
                  @change="getFormList"
                >
                  <el-option
                    v-for="item in formCategoryList"
                    :key="item.id + ''"
                    :label="item.name"
                    :value="item.id + ''"
                  >
                    <span style="float: left" v-if="item.deep === 1">{{
                      item.name
                    }}</span>
                    <span :style="deepStyle(item)" v-else
                      >┝{{ item.name }}</span
                    >
                  </el-option>
                </el-select>
              </a-row-item>
              <a-row-item label-col="0" wrapper-col="16">
                <el-select
                  v-model="currentSelect.form.formId"
                  @change="pcFormChange"
                  class="item_width"
                >
                  <el-option
                    v-for="item in pcFormList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </a-row-item>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="移动端表单：" label-col="4" wrapper-col="20">
              <a-row-item label-col="0" wrapper-col="8">
                <el-select
                  v-model="currentSelect.form.appFormType"
                  @change="getMobileFormList"
                  class="item_width"
                >
                  <el-option
                    v-for="item in formCategoryList"
                    :key="item.id + ''"
                    :label="item.name"
                    :value="item.id + ''"
                  >
                    <span style="float: left" v-if="item.deep === 1">{{
                      item.name
                    }}</span>
                    <span :style="deepStyle(item)" v-else
                      >┝{{ item.name }}</span
                    >
                  </el-option>
                </el-select>
              </a-row-item>
              <a-row-item label-col="0" wrapper-col="16">
                <el-select
                  v-model="currentSelect.form.appFormId"
                  @change="mobileFormChange"
                  class="item_width"
                >
                  <el-option
                    v-for="item in mobileFormList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </a-row-item>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="备注：" label-col="4" wrapper-col="20">
              <a-textarea
                placeholder="请输入备注"
                v-model="currentSelect.note"
              />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="电子签章模板：" label-col="4" wrapper-col="20">
              <fileUpload v-model="currentSelect.signPath" />
            </a-row-item>
          </a-row>
        </el-form>
      </a-tab-pane>
      <a-tab-pane key="behavior" tab="策略">
        <a-form-model style="margin-right: 20px;">
          <a-row class="ant-form-item form-item ">
            <a-row-item label="流转类型：" label-col="4" wrapper-col="8">
              <el-select
                v-model="currentSelect.behavior.flowType"
                class="item_width"
              >
                <el-option
                  v-for="item in behaviorFlowTypes"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                ></el-option>
              </el-select>
            </a-row-item>
            <a-row-item label="运行时允许选择：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                v-model="currentSelect.behavior.runSelect"
              />
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="处理者类型：" label-col="4" wrapper-col="8">
              <a-select v-model="currentSelect.behavior.handlerType">
                <a-select-option
                  :value="item.keyword"
                  v-for="(item, index) in handlerTypes"
                  :key="index"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-row-item>
            <a-row-item label="选择范围：" label-col="4" wrapper-col="8">
              <user-select
                :select-type="0"
                :is-mul-select="true"
                :tab-config="{ showAllOrganize: true, showAllWorkGroup: true }"
                v-model="currentSelect.behavior.selectRange"
              ></user-select>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="处理者步骤：" label-col="4" wrapper-col="8">
              <a-select v-model="currentSelect.behavior.handlerStep">
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in flowData.nodeList"
                  :key="index"
                >
                  {{ item.nodeName }}
                </a-select-option>
              </a-select>
            </a-row-item>
            <a-row-item label="值字段：" label-col="4" wrapper-col="8">
              <el-select
                v-model="currentSelect.behavior.valueField"
                placeholder="请选择"
                clearable
                class="item_width"
              >
                <el-option
                  v-for="item in fieldData"
                  :key="item.columnName"
                  :label="item.columnName"
                  :value="item.columnName"
                ></el-option>
              </el-select>
            </a-row-item>
          </a-row>
          <a-row>
            <a-row-item label-col="0" wrapper-col="12">
              <a-row class="ant-form-item form-item ">
                <a-row-item label="默认处理者：" label-col="8" wrapper-col="16">
                  <user-select
                    :select-type="0"
                    :is-mul-select="true"
                    :tab-config="{
                      showAllOrganize: true,
                      showAllWorkGroup: true
                    }"
                    v-model="currentSelect.behavior.defaultHandler"
                  ></user-select>
                </a-row-item>
              </a-row>
              <a-row class="ant-form-item form-item ">
                <a-row-item label="处理策略：" label-col="8" wrapper-col="16">
                  <a-select v-model="currentSelect.behavior.handlerModel">
                    <a-select-option
                      :value="item.keyword"
                      v-for="(item, index) in handlerBehaviors"
                      :key="index"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-row-item>
              </a-row>
            </a-row-item>
            <a-row-item label-col="0" wrapper-col="12">
              <a-row class="ant-form-item form-item ">
                <a-row-item
                  label="默认处理者SQL/方法："
                  label-col="8"
                  wrapper-col="16"
                >
                  <a-textarea
                    placeholder="请输入SQL"
                    v-model="currentSelect.behavior.defaultSqlMethod"
                  />
                </a-row-item>
              </a-row>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="策略百分比：" label-col="4" wrapper-col="8">
              <a-input
                placeholder="请输入策略百分比"
                v-model="currentSelect.behavior.percentege"
              >
                <span slot="suffix">%</span>
              </a-input>
            </a-row-item>
            <a-row-item label="退回策略：" label-col="4" wrapper-col="8">
              <a-select v-model="currentSelect.behavior.backModel">
                <a-select-option
                  :value="item.keyword"
                  v-for="(item, index) in behaviorBacks"
                  :key="index"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="会签策略：" label-col="4" wrapper-col="8">
              <a-select v-model="currentSelect.behavior.counterSignature">
                <a-select-option
                  :value="item.keyword"
                  v-for="(item, index) in counterSignatures"
                  :key="index"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-row-item>
            <a-row-item label="退回类型：" label-col="4" wrapper-col="8">
              <a-select v-model="currentSelect.behavior.backType">
                <a-select-option
                  :value="item.keyword"
                  v-for="(item, index) in backTypes"
                  :key="index"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="会签百分比：" label-col="4" wrapper-col="8">
              <a-input
                placeholder="请输入会签百分比"
                v-model="currentSelect.behavior.counterSignaturePercentege"
              >
                <span slot="suffix">%</span>
              </a-input>
            </a-row-item>
            <a-row-item label="退回步骤：" label-col="4" wrapper-col="8">
              <a-select v-model="currentSelect.behavior.backStep">
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in flowData.nodeList"
                  :key="index"
                >
                  {{ item.nodeName }}
                </a-select-option>
              </a-select>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item label="是否抄送：" label-col="4" wrapper-col="8">
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                default-checked
                v-model="currentSelect.behavior.copy"
              />
            </a-row-item>
            <a-row-item label="抄送人员：" label-col="4" wrapper-col="8">
              <user-select
                :select-type="0"
                :is-mul-select="true"
                v-model="currentSelect.behavior.copyFor"
              ></user-select>
            </a-row-item>
          </a-row>
          <a-row class="ant-form-item form-item ">
            <a-row-item
              label="是否选择抄送人员："
              label-col="4"
              wrapper-col="8"
            >
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                default-checked
                v-model="currentSelect.behavior.copySelect"
              >
              </a-switch>
            </a-row-item>
            <!--            <a-row-item label="并发控制：" label-col="4" wrapper-col="8">-->
            <!--              <a-switch-->
            <!--                checkedChildren="是"-->
            <!--                unCheckedChildren="否"-->
            <!--                default-checked-->
            <!--                v-model="currentSelect.behavior.concurrentModel"-->
            <!--              />-->
            <!--            </a-row-item>-->
            <a-row-item
              label="完成时是否显示抄送："
              label-col="4"
              wrapper-col="8"
            >
              <a-switch
                checkedChildren="是"
                unCheckedChildren="否"
                default-checked
                v-model="currentSelect.behavior.completeCopy"
              ></a-switch>
            </a-row-item>
          </a-row>
        </a-form-model>
      </a-tab-pane>
      <a-tab-pane key="button" tab="按钮">
        <a-row :gutter="10" style="margin-right: 10px;margin-left: 10px;">
          <a-col
            :span="8"
            style="border: 1px solid #cecece;height: 500px;line-height: 500px;overflow-y: scroll;"
          >
            <a-list
              item-layout="horizontal"
              :data-source="buttonData"
              :split="false"
            >
              <a-list-item
                slot="renderItem"
                slot-scope="item, index"
                :tabindex="index"
              >
                <div
                  class="button_item"
                  style="line-height: 30px;line-height: 30px;width: 100%;"
                  :class="[item.checked ? 'is_check' : 'is_normal']"
                  @click="leftButtonSelect(item)"
                >
                  <i :class="item.ico" style="margin-left: 10px;" /><span
                    style="margin-left: 5px;"
                    >{{ item.name }}</span
                  >
                </div>
              </a-list-item>
            </a-list>
          </a-col>
          <a-col :span="2" style="height: 500px;text-align: center">
            <a-button
              type="primary"
              @click="confirmSelectButton"
              style="margin-top: 200px;"
            >
              添加
            </a-button>
            <a-button
              type="primary"
              style="margin-top: 10px;"
              @click="delSelectButton"
            >
              删除
            </a-button>
          </a-col>
          <a-col
            :span="8"
            style="border: 1px solid #cecece;height: 500px;line-height: 500px;"
          >
            <a-list
              item-layout="horizontal"
              :data-source="buttonSelected"
              :split="false"
            >
              <a-list-item slot="renderItem" slot-scope="item, index">
                <div
                  style="line-height: 30px;line-height: 30px;width: 100%;"
                  :class="[item.checked ? 'is_check' : 'is_normal']"
                  @click="rightButtonSelect(item)"
                >
                  <i :class="item.ico" style="margin-left: 10px;" /><span
                    style="margin-left: 5px;"
                    >{{ item.name }}</span
                  >
                </div>
              </a-list-item>
            </a-list>
          </a-col>
          <a-col :span="6">
            <div style="border: 1px solid #cecece;height: 500px;padding: 5px;">
              <span style="font-weight: bold;">按钮显示：</span>
              <a-input placeholder="" v-model="curRightButton.name" />
              <span style="font-weight: bold;">排序：</span>
              <a-input placeholder="" v-model="curRightButton.sort" />
              <div style="font-weight: bold;">按钮说明：</div>
              <span>{{ curRightButton.note }}</span>
            </div>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="form" tab="数据">
        <form-data-table
          :flow-data="flowData"
          :select="currentSelect"
          @getFields="getFields"
          style="margin-left:20px;margin-right: 20px;"
        ></form-data-table>
      </a-tab-pane>
      <a-tab-pane key="event" tab="事件">
        <a-form layout="horizontal">
          <a-form-item
            label="步骤提交前事件"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input
              placeholder="请输入步骤提交前事件"
              v-model="currentSelect.event.submitBefore"
            />
          </a-form-item>
          <a-form-item
            label="步骤提交后事件"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input
              placeholder="请输入步骤提交后事件"
              v-model="currentSelect.event.submitAfter"
            />
          </a-form-item>
          <a-form-item
            label="退回前执行事件"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input
              placeholder="请输入退回前执行事件"
              v-model="currentSelect.event.backBefore"
            />
          </a-form-item>
          <a-form-item
            label="退回后执行事件"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input
              placeholder="请输入退回后执行事件"
              v-model="currentSelect.event.backAfter"
            />
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import ARowItem from "./ARowItem";
import FormDataTable from "./FormDataTable";
import fileUpload from "@/components/file-upload/fileUpload";
import _ from "lodash";

export default {
  name: "FlowNodeAttr",
  props: ["flowData", "select"],
  components: {
    ARowItem,
    FormDataTable,
    fileUpload
  },
  data() {
    return {
      signatureTypes: this.getDictionary("WORKFLOW_SIGN_TYPE"),
      behaviorFlowTypes: this.getDictionary("WORKFLOW_FLOW_TYPE"),
      handlerTypes: this.getDictionary("WORKFLOW_HANDLER_TYPE"),
      handlerSteps: this.getDictionary("WORKFLOW_HANDLER_TYPE"),
      handlerBehaviors: this.getDictionary("WORKFLOW_HANDLE_BEHAVIOR"),
      behaviorBacks: this.getDictionary("WORKFLOW_BEHAVIOR_BACK"),
      counterSignatures: this.getDictionary(
        "WORKFLOW_BEHAVIOR_COUNTERSIGNATURE"
      ),
      backTypes: this.getDictionary("WORKFLOW_BACK_TYPE"),
      currentSelect: _.cloneDeep(this.select),
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 }
      },
      activeKey: "flow-attr",
      tabActiveKey: "base",
      buttonData: [],
      buttonSelected: [],
      curSelectButton: {},
      curRightButton: {},
      formCategoryList: [],
      pcFormList: [],
      mobileFormList: [],
      fieldData: [],
      isSelect: false,
      isSelect2: false,
      selectRange: "" //选择范围
    };
  },
  created() {},
  mounted() {
    this.getWorkBtnList();
    this.getCategoryTree();
    this.getFieldData();
    if (this.currentSelect.form.formType) {
      this.getFormList();
    }
    if (this.currentSelect.form.appFormType) {
      this.getMobileFormList();
    }
  },
  computed: {},
  methods: {
    // 根据数据库表名获取数据字段信息
    getFieldData() {
      if (
        this.flowData &&
        this.flowData.attr &&
        this.flowData.attr.titleFieldTable
      ) {
        this.API.getWorkflowTableFieldList({
          tableName: this.flowData.attr.titleFieldTable
        }).then(res => {
          this.fieldData = res.data;
        });
      }
    },
    getFormList(val) {
      if (this.isSelect2) {
        this.currentSelect.form.formId = "";
      }
      this.API.getWorkflowFormList({ categoryId: val }).then(res => {
        this.pcFormList = res.data;
      });
      this.isSelect2 = true;
    },
    pcFormChange(val) {
      this.pcFormList.map(item => {
        if (item.id === val) {
          this.currentSelect.form.formName = item.name;
        }
      });
    },
    mobileFormChange(val) {
      this.mobileFormList.map(item => {
        if (item.id === val) {
          this.currentSelect.form.appFormName = item.name;
        }
      });
    },
    getMobileFormList(val) {
      if (this.isSelect) {
        this.currentSelect.form.appFormId = "";
      }
      this.API.getWorkflowFormList({ categoryId: val }).then(res => {
        this.mobileFormList = res.data;
      });
      this.isSelect = true;
    },
    deepStyle(item) {
      return "margin-left:" + item.deep * 3 + "px";
    },
    // 获取表单类型
    getCategoryTree() {
      this.API.getCategoryTree({ type: "FORM", parentId: 0 }).then(res => {
        if (res.data) {
          console.log(res.data, 11);
          this.formCategoryList = [];
          let tem = this.setCategoryDeep(res.data, 1);
          console.log(tem);
        }
      });
    },
    // 设置分类的深度
    setCategoryDeep(data, deep) {
      console.log(data, deep);
      data.map(item => {
        item.deep = deep;
        let nextDeep = deep + 1;
        this.formCategoryList.push(item);
        if (item.children) {
          item.children = this.setCategoryDeep(item.children, nextDeep);
        }
      });
      return data;
    },
    // 查询按钮信息列表
    getWorkBtnList() {
      this.API.getWorkflowButtonList().then(res => {
        if (res.data) {
          res.data.map(item => {
            item.checked = false;
          });
        }
        this.buttonData = res.data;
        console.log(this.currentSelect.buttons, "button");
        if (
          this.currentSelect !== undefined &&
          this.currentSelect.buttons !== undefined &&
          this.currentSelect.buttons.length > 0
        ) {
          this.currentSelect.buttons.map((item, index) => {
            this.buttonData.map(button => {
              if (button.id === item.buttonId) {
                this.buttonSelected.push({
                  id: item.buttonId,
                  name: item.buttonName,
                  sort: item.sort,
                  ico: button.ico,
                  checked: false
                });
              }
            });
          });
        }
      });
    },
    getFields(val) {
      this.currentSelect.fields = val;
    },
    tabChange(tab) {
      this.tabActiveKey = tab;
    },
    // 左侧按钮选择点击事件
    leftButtonSelect(item) {
      this.buttonData.map(item => {
        item.checked = false;
      });
      item.checked = true;
      this.curSelectButton = item;
    },
    // 右侧按钮选择点击事件
    rightButtonSelect(item) {
      this.buttonSelected.map(item => {
        item.checked = false;
      });
      item.checked = true;
      this.curRightButton = item;
    },
    // 确认选择的按钮
    confirmSelectButton() {
      if (this.curSelectButton) {
        this.buttonSelected.push(this.curSelectButton);
      }
    },
    // 删除选择的按钮
    delSelectButton() {
      if (this.curRightButton) {
        this.buttonSelected.map((item, index) => {
          if (item.id === this.curRightButton.id) {
            this.buttonSelected.splice(index, 1);
          }
        });
      }
    }
  },
  watch: {
    currentSelect: {
      handler(val) {
        console.log(val, "select0000000000");
        this.$emit("getNodeData", val);
      },
      deep: true
    },
    "currentSelect.form.formType": {
      handler(val) {
        this.getFormList(val);
      },
      deep: true
    },
    "currentSelect.form.appFormType": {
      handler(val) {
        this.getMobileFormList(val);
      },
      deep: true
    },

    buttonSelected: {
      handler(val) {
        if (val && val.length > 0) {
          let tem = [];
          val.map((item, index) => {
            tem.push({
              buttonId: item.id,
              buttonName: item.name,
              sort: item.sort
            });
          });
          this.currentSelect.buttons = tem;
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="scss">
@import "../style/flow-node-attr.scss";
</style>
